<!--
 * @Autor: 王琛
 * @Description: 图文按钮
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>

.imgCon {
  width: 70px;
  height: 100%;
  font-size: 12px;
  transition: all .4s;
  text-align: center;

  & > i {
    transition: all .4s;
    font-size: 14px;
    color: #fff;
  }

  & > p {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin-top: 10px;
  }
}

.imgCon_select {
  & > i {
    color: rgba(185, 160, 131, 1) !important;
  }

  & > p {
    color: rgba(185, 160, 131, 1) !important;
  }
}
</style>


<template>
  <div :class="{imgCon:true, imgCon_select:_props.isSelect }">
    <i :class="['iconfont',_props.config.icon]"></i>
    <p>{{ _props.config.name }}</p>
  </div>
</template>


<script setup lang="ts">
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const _props = defineProps({
  // 数据配置
  config: {
    type: Object,
    default: () => {
      return {
        name: "菜单一一",
        icon: "icon-wangluo",
        key: "menu_one",
        type: "iframe",
        iframeUrl: "https://www.baidu.com",
        router: {
          path: "home"
        }
      }
    }
  },
  // 是否选中
  isSelect: {
    type: Boolean,
    default: true,
  }
})
const _data = reactive({});
</script>

